<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>
  </head>
  <style>
    table tr td {
      border: 1px solid gray;
      padding: 10px;
    }
    table {
      border-collapse: collapse;
      width: 800px;
      table-layout: fixed;
    }
    tr.firstLine {
      background-color: lightGray;
    }
  </style>
  <body>
    <!--view层  -->
    <div id="app">
      <table>
        <tbody>
          <tr>
            <td>单个复选框举例,单行文本和多行文件框类似。</td>
            <td><input type="text" v-model="message" /></td>
            <td>{{ message }}</td>
          </tr>
          <tr>
            <td>多个复选框举例</td>
            <td>
              <label for="小鱼">小鱼</label>
              <input type="checkbox" value="小鱼" v-model="checked" />
              <label for="小花"> 小花</label>
              <input type="checkbox" value="小花" v-model="checked" />
              <label for="小草">小草</label>
              <input type="checkbox" value="小草" v-model="checked" />
            </td>
            <td>{{ checked }}</td>
          </tr>

          <tr>
            <td>单选按钮举例</td>
            <td>
              <label for="小鱼">小鱼</label>
              <input type="radio" value="小鱼" v-model="radio" />
              <label for="小花">小花 </label>
              <input type="radio" value="小花" v-model="radio" />
            </td>
            <td>{{ radio }}</td>
          </tr>
          <tr>
            <td>单选选择框举例</td>
            <td>
              <select v-model="select">
                <option disabled="disabled" value="">---请选择--</option>
                <option value="小花">小花</option>
                <option value="小草">小草</option>
                <option value="小鱼">小鱼</option>
              </select>
            </td>
            <td>{{ select }}</td>
          </tr>
          <tr>
            <td>多选选择框举例</td>
            <td>
              通过Ctrl或shift进行多选
              <select v-model="multiple_select" multiple="multiple">
                <option disabled="disabled" value="">---请选择--</option>
                <option value="小花">小花</option>
                <option value="小草">小草</option>
                <option value="小鱼">小鱼</option>
              </select>
            </td>
            <td>{{ multiple_select }}</td>
          </tr>
          <tr>
            <td>修改默认值的单个复选框举例</td>
            <td>
              <input
                type="checkbox"
                true-value="yes"
                false-value="no"
                v-model="toggle"
              />
            </td>
            <td>{{ toggle }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script
    type="text/javascript"
    src="vue.min.js"
  ></script>
  <script>
    /* Model层 */
    var exampleData = {
      message: "",
      checked: [],
      radio: "",
      select: "",
      multiple_select: [],
      toggle: ""
    };
    /*     ViewModel层,连接view和model层
    vue实例需要传入一个选项对象
　　    选项对象包括挂载对象，数据，方法，模生命周期钩子（？）
    el属性指向view,表示把vue实例绑定某个dom元素
 */
    new Vue({
      el: "#app",
      data: exampleData
    });
  </script>
</html>
